<template>
  <div class="schoolNotice">
    <div class="common_showBox bx">

      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">通知信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="openLayer()">新增</div>
            <div class="common_title_btn" @click="deletBtn()">删除</div>
          </div>
        </div>
        <div class="common_form bx">
          <!-- <el-table ref="multipleTable" :data="noticeDataList" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange" @row-click="console"> -->
          <el-table ref="multipleTable" :data="noticeDataList" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="checkFlag"></el-table-column>
            <el-table-column label="序号" prop="num" width="60"></el-table-column>
            <el-table-column prop="title" label="内容" class-name='clickCell' show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="year" label="作者" show-overflow-tooltip ></el-table-column> -->
            <el-table-column prop="start_timeT" label="开始时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="end_timeT" label="结束时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="clickBtn" @click="handleEdit(scope.$index, scope.row)">修改</span>
                <span class="clickBtn" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</span>
                <span class="clickBtn clickCellBtn" type="danger" @click="handleLook(scope.$index, scope.row)">详情</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()" class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()" class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox addSchoolNotice" v-if="addSchoolNotice">
      <div class="common_alertBox_header" v-if='!modifyFlag'>
        <span>新增通知</span>
      </div>
      <div class="common_alertBox_header" v-if='modifyFlag'>
        <span>修改通知</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_center">
            <span class="importentIcon">标题：</span>
            <div class="chooseBox paddingInput title">
              <input type="text" v-model="noticeData.title">
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_center">
            <span class="importentIcon">内容：</span>
            <div class="chooseBox textarea bx">
              <textarea name="" id="" cols="30" rows="10" v-model="noticeData.content"></textarea>
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <el-radio v-model="noticeData.is_serious" label="1">紧急通知</el-radio>
          <el-radio v-model="noticeData.is_serious" label="0">一般通知</el-radio>
        </div>
        <div class="common_alertBox_li" v-if="noticeData.is_serious=='0'">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">开始时间：</span>
            <div class="chooseBox paddingInput date">


              <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="noticeData.start_time">
              </el-date-picker>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">结束时间：</span>
            <div class="chooseBox paddingInput date">

              <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="noticeData.end_time">
              </el-date-picker>

            </div>
          </div>
        </div>
        <div class="common_alertBox_li" v-if="noticeData.is_serious=='1'">
          <div class="common_alertBox_li_left withe ">
            紧急通知
          </div>
          <div class="common_alertBox_li_right">

          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addNoticeSureBtn" v-if='!modifyFlag'>保存</div>
        <div class="common_alertBox_footer_btn sureBtn" @click="modifySureBtn" v-if='modifyFlag'>修改</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn()">取消</div> -->

        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addNoticeSureFlag" @click="addNoticeSureBtn"
          v-if='!modifyFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="modifySureFlag" @click="modifySureBtn" v-if='modifyFlag'>修改</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
    <div class="noticeMsgBox br bx" v-if="noticeFlag">
      <div class="noticeMsgTitleBox">
        <div class="noticeMsgTitle">{{noticeData.title}}</div>
        <div class="noticeMsgTitleTime">{{noticeData.create_time}}</div>
        <div @click="cancelBtn" class="common_title_btn noticeMsgBtn">返回</div>
      </div>
      <div class="noticeMsgContent">
        {{noticeData.content}}
      </div>
    </div>
  </div>


</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        liDataGet: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        liDataGet1: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        addNoticeSureFlag: false,
        modifySureFlag: false,
        noticeFlag: false,
        addSchoolNotice: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        modifyFlag: false,
        page: 1, //初始页数
        pagesize: 12, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        noticeDataList: [{"id":4,"title":"放高温假","is_serious":"是","start_time":"","end_time":"","create_time":"2018-08-13 15:41:06","start_timeT":"---------- ---------- ","end_timeT":"---------- ---------- ","is_seriousNum":"1","num":1},{"id":2,"title":"端午节放假","is_serious":"否","start_time":"2018-08-01 00:00:00","end_time":"2018-08-31 00:00:00","create_time":"2018-08-10 11:03:49","start_timeT":"2018-08-01 00:00:00","end_timeT":"2018-08-31 00:00:00","is_seriousNum":"0","num":2}], //接受数据
        noticeData: {
          title: '',
          content: '',
          is_serious: '1',
          start_time: '',
          end_time: ''
        },
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件
          //console.log(index, row);
          var _this = this;
          _this.noticeData = {
            title: row.title,
            is_serious: row.is_seriousNum,
            start_time: row.start_time,
            end_time: row.end_time,
            id: row.id
          };
          // if (row.birthday == "0000-00-00") {
          //   this.noticeData.birthday = '';
          // }



          $('.mask').show();

        },
        handleDelete(index, row) { //删除事件
          //console.log(index, row);
          //console.log(row.id)
          // this.addTeacherFlag = false;
          // this.modifyFlag = false;
          // $('.mask').hide();
          var _this = this;
          this.$confirm('此操作将永久删除' + row.title + ', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {



          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        handleLook(index, row) {
          //console.log(index, row);

          //console.log(index, row);
          var _this = this;
          _this.noticeData = {
            title: row.title,
            is_serious: row.is_seriousNum,
            start_time: row.start_time,
            end_time: row.end_time,
            id: row.id,
            create_time: row.create_time
          };
          // if (row.birthday == "0000-00-00") {
          //   this.noticeData.birthday = '';
          // }

        }
      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // //console.log(e)
      },
      clickCell(e) {
        console.log(e)
      },
      openLayer() { //显示添加班级弹窗
        this.addSchoolNotice = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
        var _this = this;
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择消息'
          });
          return;
        }
        var nameStr = '';
        var idStr = '';
        this.multipleSelection.map(function (e) {
          //console.log(e)
          nameStr += e.title + '、';
          idStr += e.id + ','
        });
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        //console.log(idStr)
        this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      changeNoticeFlag(row) {
        //console.log(row);
        this.noticeFlag = !this.noticeFlag;
        
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        let _this = this;
        _this.maxPageFlag = false;
        _this.minPageFlag = false;
        var page = page;
        var pagesize = pagesize;




      },
      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      cancelBtn() { //取消按钮
        this.addSchoolNotice = false;
        this.setTeacherFlag = false;
        this.modifyFlag = false;
        this.addNoticeSureFlag = false;
        this.modifySureFlag = false;
        this.noticeFlag=false;
        this.noticeData = {
          title: '',
          content: '',
          is_serious: '1',
          start_time: '',
          end_time: ''
        }
        $('.mask').hide();
      },
      setTeacherSureBtn() { //设置教师确定按钮
        alert('保存成功')
        this.setTeacherFlag = false;
        $('.mask').hide();
      },

      addNoticeSureBtn() { //添加班级确定按钮

        if (this.trim(this.noticeData.title) === '') {
          this.$message.error('标题不能为空');
          return;
        } else if (this.trim(this.noticeData.content) === '') {
          this.$message.error('内容不能为空');
          return;
        } else if (this.noticeData.is_serious == '0' && (this.noticeData.start_time == '' || this.noticeData.end_time ==
            '')) {
          this.$message.error('日期不能为空');
          return;

        }

        var _this = this;
        _this.addNoticeSureFlag = true;



        // $.ajax({
        //   type: "post",
        //   url: http.teacher,
        //   data: postData,
        //   dataType: "json",
        //   success: function (data) {
        //     //console.log(data)
        //   }
        // });



        // //console.log(this.noticeData)
      },
      modifySureBtn() {

        var id = this.noticeData.id;
        var _this = this;
        _this.modifySureFlag = true;
        if (this.trim(this.noticeData.title) === '') {
          this.$message.error('学生姓名不能为空');
          return;
        } else if (this.trim(this.noticeData.content) === '') {
          this.$message.error('学号不能为空');
          return;
        } else if (this.noticeData.is_serious == '0' && (this.noticeData.start_time == '' || this.noticeData.end_time ==
            '')) {
          this.$message.error('出生日期不能为空');
          return;

        }
        // console.log({
        //   title: this.noticeData.title,
        //   content: this.noticeData.content,
        //   is_serious: this.noticeData.is_serious,
        //   start_time: this.noticeData.start_time,
        //   end_time: this.noticeData.end_time
        // })



      },
      jq(){
        $('.common_form ').on('click','td.clickCell',function () {
         $(this).parent().find('.clickCellBtn').click()
          })
      }

    },


    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }


  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;
  }


  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .schoolNotice {
    height: 100%;
  }

  .common_showBox {
    padding: 0;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox_li_center {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .addSchoolNotice {
    width: 833px;
    height: 526px;
  }

  .textarea {
    width: 670px;
    height: 138px;
    padding: 2px;
  }

  .paddingInput.title {
    width: 670px;

  }

  .textarea textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
  }

  .common_alertBox_li_left {
    justify-content: flex-start;
  }

  .common_alertBox_li {
    justify-content: flex-start;
    font-size: 18px;
  }

  .common_alertBox .common_alertBox_header {
    margin-bottom: 6px;
  }

  .withe {
    color: white;
    line-height: 36px;
  }

  .noticeMsgBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 1000;
    padding: 0px 33px 25px 56px;
    text-align: left;
  }

  .noticeMsgTitleBox {
    border-bottom: 2px solid #e9e9e9;

    position: relative;

  }

  .noticeMsgTitle {
    font-size: 30px;
    color: #3a3a3a;
    line-height: 75px;
  }

  .noticeMsgTitleTime {
    font-size: 16px;
    color: #878787;
    margin-bottom: 30px;
  }

  .noticeMsgBtn {

    margin: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .noticeMsgContent {
    line-height: 34px;
    padding-top: 40px;
    color: #848484;
  }

  /* 更正 */

</style>
